<template>
  <div class="home-recommond">
    <div class="top">
      <h2 class="title">推荐歌单</h2>
      <div class="part-2">
        <div class="list" v-for="(item, index) in listData" :key="index">
          <div class="pic">
            <img :src="item.picUrl" alt="" />
            <span>{{ item.playCount | numFilter(1) }}万</span>
          </div>
          <div class="text">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <h2 class="title">最新音乐</h2>
    <ul class="bottom" v-for="(item1, index) in singInfo" :key="index">
        <li>
            <p class="name">{{item1.name}}</p>
            <div class="info">
                <i class="sq" v-if="item1.song.sqMusic != null"></i>
                <span class="zj">{{item1.song.artists[0].name}} - {{item1.song.album.name}}</span>
            </div>
            <div class="start"></div>
        </li>
    </ul>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
      singInfo: [],
    };
  },
  created() {
    this.getSongListData();
    this.getSingListData();
  },
  methods: {
    getSongListData() {
      this.$request("get", "/personalized?limit=6").then((res) => {
        console.log(res);
        this.listData = res.result;
      });
    },
    getSingListData() {
      this.$request("get", "/personalized/newsong").then((res) => {
        console.log(res);
        this.singInfo = res.result;
      });
    },
  },
  filters: {
    //处理播放器的显示格式
    // param num:小数位固定位数
    // param value:处理的数值
    numFilter(value, num) {
      //把小数位固定为num位
      return parseFloat(value / 10000).toFixed(num);
    },
  },
};
</script>

<style scoped>
.home-recommond .title {
  padding-left: 5px;
  margin: 15px 0;
  font-size: 17px;
  border-left: 2px solid red;
}
.part-2 {
  display: flex;
  flex-wrap: wrap;
}
.top .list {
  margin: 2px;
  width: calc(33% - 4px);
}
.pic {
  position: relative;
}
.pic img {
  width: 100%;
}
.pic span {
  position: absolute;
  right: 3px;
  top: 3px;
  color: #fff;
  font-size: 12px;
  background: url(../../assets/1.svg);
  background-position: center left;
  padding-left: 28px;
  background-repeat: no-repeat;
  background-size: 60% 60%;
}
.text {
  padding: 0 3px;
  font-size: 13px;
}
.bottom{
    padding-left: 10px;
}
.bottom li{
    padding: 5px 0;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
    padding-right: 32px;
    position: relative;
}
.bottom .start{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: url(../../assets/index_icon_2x.png);
    background-repeat: no-repeat;
    background-position: -24px 0;
    background-size: 166px 97px;
}
.bottom .name{
    font-size: 17px;
}
.bottom .zj{
    font-size: 12px;
    color: #888;
}
.sq{
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-right: 4px;
    background: url(../../assets/index_icon_2x.png);
    background-size: 166px 97px;
}
</style>